<template>
  <el-card>
    <h2 class="title">发布新课程{{ active }}</h2>
    <el-steps
      :active="active"
      process-status="wait"
      finish-status="success"
      style="margin-bottom: 40px"
      simple
    >
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="最终发布" />
    </el-steps>

    <!-- 步骤内容 -->
    <!-- step1 Info -->
    <Info v-if="active == 0"></Info>

    <!-- step2  ChapterIndex-->
    <Chapter v-if="active == 1"></Chapter>

    <!-- step3 Publish -->
    <Publish v-if="active == 2 || active === 3"></Publish>
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
//import { useRouter } from 'vue-router'

//引入子组件
import Info from '@/views/course/components/info.vue'
import Chapter from '@/views/course/components/chapter/index.vue'
import Publish from '@/views/course/components/publish.vue'

//let $router = useRouter()

// console.log($router)
let active = ref<number>(0)

let courseId = ref<number>()

defineExpose({
  active: active,
  courseId: courseId
})

// const next = () => {
//   if (active.value++ > 2) active.value = 0
//   $router.push({
//     path: '/course/chapter/1'
//   })
//   console.log(active.value)
// }
</script>
<style>
.title {
  text-align: center;
  margin-bottom: 16px;
  font-weight: bold;
  font-size: large;
}
</style>
